<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src=" https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js" type="text/javascript"
			charset="utf-8"></script>
		<style type="text/css">
			#charts {
				width: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="charts">

		</div>
		<script type="text/javascript">
			var charts = echarts.init(document.getElementById('charts'));
			var option = {
				xAxis: {
					type: 'category',
					data: ['1月', '2月', '3月', '4月', '5月'],
					boundaryGap: false //紧挨边缘 就是第一个点距离y的距离
				},
				yAxis: {
					type: 'value',
					scale: true//表示缩放  值相差太小时候使用  就是从数据最小值开始  不从0开始
				},
				toolbox: { //所提供的工具栏 有导出图片 动态类型切换  数据区域缩放  重置五个工具
					feature: {
						saveAsImage: {}, //导出图片
						dataView: {}, //数据视图
						restore: {}, //重置的功能
						dataZoom: {}, //区域缩放
						magicType: { //动态类型切换
							type: ['bar', 'line']
						}
					},
				},
				legend:{//标题切换意思 点击哪一个就显示哪一个数据
					data:['kn','sx']
				},
				tooltip:{
					trigger:'item'
				},
				series: [

					{
						name: 'kn',
						data: [3000, 242, 42, 445, 244],
						type: 'line',
						markPoint: { //最大值最小值
							data: [{
									type: 'max'
								},
								{
									type: 'min'
								}
							]
						},
						markLine: { //求平均值
							data: [{
								type: 'average'
							}]
						},
						markArea: { //标注区间
							data: [
								[{ //起始
										xAxis: '1月',
									},
									{ //结束
										xAxis: '2月'
									}
								],
								[{ //起始
										xAxis: '4月',
									},
									{ //结束
										xAxis: '5月'
									}
								]
							]
						},
						smooth: true, //曲线平滑效果
						lineStyle: { //设置线的样式
							color: 'green',
							type: 'dashed' //线条样式：dashed虚线 dotted点线  solid实线
						},
						areaStyle: { //区域样式
							color: 'pink', //填充颜色
						}

					},
					{
						name:'sx',
						data:[422,424,14,1,41,],
						type:'line'
					}



				]
			};
			charts.setOption(option);
		</script>
	</body>
</html>
